<template>
  <div
    class="created-form-container"
    style="height:100%;"
  >

    <div
      v-if="data.list.length == 0"
      class="form-empty"
    >在左侧拖拽相关字段</div>

    <el-form
      style="height:calc(100% - 10px);"
      :size="data.config.size"
      :label-position="data.config.labelPosition"
      :label-width="data.config.labelWidth + 'px'"
    >

      <draggable
        v-model="data.list"
        class="screen"
        v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-form'}"
        style="height:100%;"
        @end="handleMoveEnd"
        @add="handleAddFormItem"
      >

        <transition-group
          name="fade"
          tag="div"
          class="created-form-list"
        >

          <template v-for="(element, index) in data.list">
            <template v-if="element.type == 'grid'">
              <el-row
                v-if="element && element.key"
                :key="element.key"
                class="created-col created-view"
                type="flex"
                :class="{active: selectFormData.key == element.key}"
                :gutter="element.options.gutter ? element.options.gutter : 0"
                :justify="element.options.justify"
                :align="element.options.align"
                @click.native="handleSelectForm(index)"
              >
                <div>cest</div>

                <el-col
                  v-for="(col, colIndex) in element.columns"
                  :key="colIndex"
                  :span="col.span ? col.span : 0"
                >
                  <draggable
                    v-model="col.list"
                    :no-transition-on-drag="true"
                    v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-form'}"
                    @end="handleMoveEnd"
                    @add="handleAddFormCol($event, element, colIndex)"
                  >
                    <transition-group
                      name="fade"
                      tag="div"
                      class="created-col-list"
                    >
                      <template v-for="(el, i) in col.list">
                        <ShowFormItem
                          v-if="el.key"
                          :key="el.key"
                          :element="el"
                          :select.sync="selectFormData"
                          :index="i"
                          :data="col"
                        />
                      </template>
                    </transition-group>

                  </draggable>
                </el-col>
                <div
                  v-if="selectFormData.key == element.key"
                  class="created-view-action created-col-action"
                >
                  <i
                    class="el-icon-delete"
                    title="删除"
                    @click.stop="handleDeleteFormItem(index)"
                  />
                </div>

                <!-- <div v-if="selectFormData.key == element.key" class="created-view-drag created-col-drag"> -->
                <!-- <div class="created-view-drag created-col-drag">
                  <i class="el-icon-sort drag-form" />
                </div> -->
                <div class="created-view-drag created-col-drag">
                  <i class="el-icon-sort drag-form" />
                </div>
              </el-row>

            </template>
            <template v-else>
              <!-- <span :key="element.key">{{element}}></span> -->
              <ShowFormItem
                v-if="element && element.key && !element.ishidden"
                :key="element.key"
                :element="element"
                :select.sync="selectFormData"
                :index="index"
                :data="data"
              />
            </template>
          </template>
        </transition-group>

      </draggable>
    </el-form>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import ShowFormItem from './ShowFormItem'
export default {
  components: {
    Draggable,
    ShowFormItem
  },
  // eslint-disable-next-line vue/require-prop-types
  props: ['data', 'select'],
  data() {
    return {
      selectFormData: this.select
    }
  },
  watch: {
    select(val) {
      this.selectFormData = val
    },
    selectFormData: {
      handler(val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  },
  mounted() {
    document.body.ondrop = function(event) {
      const isFirefox =
        navigator.userAgent.toLowerCase().indexOf('firefox') > -1
      if (isFirefox) {
        event.preventDefault()
        event.stopPropagation()
      }
    }
  },
  methods: {
    handleMoveEnd(evt) {},
    handleSelectForm(index) {
      this.selectFormData = this.data.list[index]
    },
    handleAddFormItem(evt) {
      const newIndex = evt.newIndex
      // const to = evt.to
      var itemlist = this.data.list
      if (itemlist && itemlist.length > 0 && itemlist[newIndex].model) {
        var count = 0
        itemlist.forEach(item => {
          if (item.model === itemlist[newIndex].model) {
            count++
          }
        })
        if (count > 1) {
          this.$message({
            message: '相同业务组件只能有一个',
            type: 'error',
            duration: 3 * 1000
          })
          this.handleDeleteFormItem(newIndex)
          return false
        }
      }
      // 为拖拽到容器的元素添加唯一 key
      const key =
        Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      this.$set(this.data.list, newIndex, {
        ...this.data.list[newIndex],
        options: {
          ...this.data.list[newIndex].options
          // remoteFunc: 'func_' + key
        },
        key: this.data.list[newIndex].key || key,
        // 绑定键值
        model:
          this.data.list[newIndex].model ||
          this.data.list[newIndex].type + '_' + key,
        rules: []
      })
      if (
        this.data.list[newIndex].type === 'radio' ||
        this.data.list[newIndex].type === 'checkbox' ||
        this.data.list[newIndex].type === 'select'
      ) {
        this.$set(this.data.list, newIndex, {
          ...this.data.list[newIndex],
          options: {
            ...this.data.list[newIndex].options,
            options: this.data.list[newIndex].options.options.map(item => ({
              ...item
            }))
          }
        })
      }
      if (this.data.list[newIndex].type === 'grid') {
        this.$set(this.data.list, newIndex, {
          ...this.data.list[newIndex],
          columns: this.data.list[newIndex].columns.map(item => ({ ...item }))
        })
      }
      this.selectFormData = this.data.list[newIndex]
    },
    handleAddFormCol($event, row, colIndex) {
      const newIndex = $event.newIndex
      const oldIndex = $event.oldIndex
      const item = $event.item
      // 防止布局元素的嵌套拖拽
      if (item.className.indexOf('data-grid') >= 0) {
        // 如果是列表中拖拽的元素需要还原到原来位置
        item.tagName === 'DIV' &&
          this.data.list.splice(
            oldIndex,
            0,
            row.columns[colIndex].list[newIndex]
          )
        row.columns[colIndex].list.splice(newIndex, 1)
        return false
      }
      const key =
        Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      this.$set(row.columns[colIndex].list, newIndex, {
        ...row.columns[colIndex].list[newIndex],
        options: {
          ...row.columns[colIndex].list[newIndex].options,
          remoteFunc: 'func_' + key
        },
        key: row.columns[colIndex].list[newIndex].key || key,
        // 绑定键值
        model:
          row.columns[colIndex].list[newIndex].model ||
          row.columns[colIndex].list[newIndex].type + '_' + key,
        rules: []
      })
      if (
        row.columns[colIndex].list[newIndex].type === 'radio' ||
        row.columns[colIndex].list[newIndex].type === 'checkbox' ||
        row.columns[colIndex].list[newIndex].type === 'select'
      ) {
        this.$set(row.columns[colIndex].list, newIndex, {
          ...row.columns[colIndex].list[newIndex],
          options: {
            ...row.columns[colIndex].list[newIndex].options,
            options: row.columns[colIndex].list[newIndex].options.options.map(
              item => ({
                ...item
              })
            )
          }
        })
      }
      this.selectFormData = row.columns[colIndex].list[newIndex]
    },
    handleDeleteFormItem(index) {
      if (this.data.list.length - 1 === index) {
        if (index === 0) {
          this.selectFormData = {}
        } else {
          this.selectFormData = this.data.list[index - 1]
        }
      } else {
        this.selectFormData = this.data.list[index + 1]
      }
      this.$nextTick(() => {
        this.data.list.splice(index, 1)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// .created-form-container .created-form-list {
//   padding-top: 40px;
// }

.created-form-container
  .created-form-list
  .created-view
  ::v-deep
  .el-form-item__label,
.created-form-container .created-form-list .created-view .el-form-item__label {
  text-align: left;
  font-size: 12px;
}
.created-form-container
  .created-form-list
  .created-view
 ::v-deep
  .el-form-item__content,
.created-form-container .created-form-list .created-view .el-form-item__content,
.created-form-container .created-form-list .created-view ::v-deep .el-radio,
.created-form-container
  .created-form-list
  .created-view
  ::v-deep
  .el-radio__label {
  margin-left: 0 !important;
  font-size: 12px;
}
.created-form-container .created-form-list .created-view.active,
.created-form-container .created-form-list .created-view:hover.active {
  outline: 1px dashed #f98221;
  background-color: #ffe9cc;
  border: unset;
  /* background: rgba(235,245,255,0.5); */
  border-radius: 3px;
}
.created-form-container .created-form-list .created-view:hover {
  outline: 1px dashed #ffd7b6;
  border: unset;
  /* background: rgba(235,245,255,0.5); */
  border-radius: 3px;
  ::v-deep.created-view-drag i {
    display: block;
  }
}
.created-form-container
  .created-form-list
  .created-view
  ::v-deep.created-view-drag {
  background-color: transparent;
  width: 100%;
  i {
    font-size: 20px;
    color: #f98221;
    text-align: left;
    font-weight: lighter;
    width: 100%;
    display: none;
    line-height: 40px;
  }
}
.created-form-container
  .created-form-list
  .created-view:hover
  ::v-deep.created-view-drag
  i {
  display: block;
}
.created-form-container
  .created-form-list
  .created-view
  ::v-deep
  .created-view-action {
  position: absolute;
  right: 0;
  top: 0;
  height: 28px;
  line-height: 28px;
  background: #eaae54a6;
  z-index: 101;
  display: none;
}
.created-form-container
  .created-form-list
  .created-view:hover
  ::v-deep
  .created-view-action {
  display: block;
}

.created-form-container .created-form-list ::v-deep input,
.created-form-container .created-form-list ::v-deep textarea {
  border: none;
  text-align: right;
  background-color: transparent;
  padding: 0;
  width: 100% !important;
}
.screen {
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
  margin: 5px;
  padding-top: 40px;
  border: 1px #ccc solid;
  background-color: #fff;
}
.screen::before {
  content: '';
  height: 15px;
  width: 15px;
  display: block;
  border: 3px solid #bbb;
  background-color: #777;
  border-radius: 9px;
  /* text-align: center; */
  margin-left: 10px;
  margin-top: -35px;
  position: absolute;
}
.created-form-list {
  height: calc(100% - 20px);
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: 30px;
  border: none !important;
  margin: 0 !important;
  background-color: transparent;

  .created-view,
  .created-view:last-child {
    display: flex;
    justify-content: space-between;
    padding: 10px 0 !important;
    background-color: #fff;
    margin-bottom: 5px !important;
    border-bottom: 1px #ddd solid !important;
    //  border-top:1px #ddd solid!important;
    padding: 5px !important;
    .el-form-item__content {
      text-align: right;
      flex-grow: 1;
    }
  }
}
.el-form-item__content {
  text-align: right;
  flex-grow: 1;
}
.created-form-list::before {
  content: '表单填写预览';
  text-align: center;
  color: #409eff;
  border-bottom: 1px solid #b3d8ff;
  position: absolute;
  font-weight: bold;
  margin-top: -35px;
  width: calc(100% - 12px);
  line-height: 30px;
}
.border-bottom {
  border-bottom: 1px #b3d8ff solid;
}
.el-form-item::after,
.el-form-item::before {
  display: none;
}
</style>
